﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>商品品牌修改</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                    <li class="breadcrumb-item active">品牌修改</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-info">

                <!-- /.card-header -->
                <!-- form start -->
                <form class="form-horizontal" id="form" enctype="multipart/form-data">
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="Name" class="col-sm-2 col-form-label">品牌名称:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="BrandName" name="BrandName" placeholder="请输入品牌名称">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="Name" class="col-sm-2 col-form-label">品牌首字母:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="BrandFirstWord" name="BrandFirstWord" placeholder="请输入品牌首字母">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="file" class="col-sm-2 col-form-label">品牌LOGO</label>
                            <div class="col-sm-10">
                                <input type="file" id="BrandLOGOImg">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="file" class="col-sm-2 col-form-label">品牌专区大图</label>
                            <div class="col-sm-10">
                                <input type="file" id="BrandMainImg">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="Name" class="col-sm-2 col-form-label">品牌故事:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="BrandStory" name="BrandStory" placeholder="品牌故事">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="OrderNum" class="col-sm-2 col-form-label">排序号:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="OrderNum" value="" name="OrderNum" placeholder="0">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="Name" class="col-sm-2 col-form-label">是否显示:</label>
                            <div class="col-sm-9">
                                <div class="icheck-primary d-inline">
                                    <input type="radio" id="r1" name="IsShow" checked="" value="1">
                                    <label for="r1" style="font-weight:normal">
                                        是
                                    </label>
                                    <div class="icheck-primary d-inline">
                                        <input id="r2" type="radio" name="IsShow" value="2">
                                        <label for="r2" style="font-weight:normal">
                                            否
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <button type="submit" id="btnOK" class="btn btn-primary">提交</button>
                        <a href="/ProductBrand/List" class="btn btn-default float-right">返回</a>
                    </div>
                    <!-- /.card-footer -->
                </form>
            </div>
            <!-- /.card -->
        </div>
    </div>
</section>

@section js{
    <script>
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var BrandLOGOImg = [], BrandMainImg = [];
        function init() {
            var id = $.getUrlParam("id")
            $.ajax({
                url: "/ProductBrand/GetOne",
                type: "GET",
                data: { id: id },
                dataType: "json",
                success: function (data) {
                    $("#BrandName").val(data.BrandName)
                    $("#BrandFirstWord").val(data.BrandFirstWord)
                    $("#BrandStory").val(data.BrandStory)
                    $("#OrderNum").val(data.OrderNum)
                    $("input[name='IsShow'][value=" + data.IsShow + "]").prop("checked", true);
                    //eval():接收一个字符串类型参数，可以将字符串转换成数组或对象,eval("()")
                    var _ProductBrandLOGOImg = eval("(" + data.BrandLOGOImg + " )")
                    var ProductBrandLOGOImgTag = ["<img src='" + _ProductBrandLOGOImg[0] + "' class=' file-preview-image' width=' 200'>"]
                    BrandLOGOImg.push(_ProductBrandLOGOImg[0])

                    $('#BrandLOGOImg').fileinput({
                        language: 'zh', //设置语言
                        allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'],//接收的文件后缀
                        showUpload: true, //是否显示上传按钮
                        browseClass: "btn btn-primary", //按钮样式
                        dropZoneEnabled: false,
                        uploadUrl: "/Img/Upload",
                        uploadAsync: true,//默认异步上传
                        uploadExtraData: { imgType: 'ProductBrandLOGOImg' },//添加额外的参数:图片类型
                        initialPreview: ProductBrandLOGOImgTag
                    });
                    var _ProductBrandMainImg = eval("(" + data.BrandMainImg + " )")
                    var ProductBrandMainImgTag = ["<img src='" + _ProductBrandMainImg[0] + "' class=' file-preview-image' width=' 200'>"]
                    BrandMainImg.push(_ProductBrandMainImg[0])
                    $('#BrandMainImg').fileinput({
                        language: 'zh', //设置语言
                        allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'],//接收的文件后缀
                        showUpload: true, //是否显示上传按钮
                        browseClass: "btn btn-primary", //按钮样式
                        dropZoneEnabled: true,
                        uploadUrl: "/Img/Upload",
                        uploadAsync: true,//默认异步上传
                        uploadExtraData: { imgType: 'ProductBrandMainImg' },//添加额外的参数:图片类型
                        initialPreview: ProductBrandMainImgTag
                    });

                }
            })
        }
        $(function () {
            
            $('#BrandLOGOImg').on('fileuploaded', function (event, data, previewId, index) {
                BrandLOGOImg.push(data.response[0])
            });
            $('#BrandMainImg').on('fileuploaded', function (event, data, previewId, index) {
                BrandMainImg.push(data.response[0])
            });
            $('#form').validate({
                rules: {
                    DrandName: {
                        required: true
                    },
                    BrandFirstWord: {
                        required: true
                    },
                    BrandStory: {
                        required: true
                    },
                    OrderNum: {
                        digits: true,
                        required: true

                    }
                },
                messages: {
                    DrandName: {
                        required: "品牌名称必须填写"
                    },
                    BrandFirstWord: {
                        required: "品牌首字母必须填写"
                    },
                    BrandStory: {
                        required: "品牌故事必须填写"
                    },
                    OrderNum: {
                        required: "排序号必须填写",
                        digits: "排序号必须是整数",

                    },
                },
                //侯海啸
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.col-sm-10').append(error);
                },
                highlight: function (element,errorClass,validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function (form) {
                    var formData = new FormData();
                    formData.append("ID", $.getUrlParam("id"))
                    formData.append("BrandName", $("#BrandName").val())
                    formData.append("BrandFirstWord", $("#BrandFirstWord").val())
                    formData.append("BrandStory", $("#BrandStory").val())
                    formData.append("BrandLOGOImg", JSON.stringify(BrandLOGOImg))
                    formData.append("BrandMainImg", JSON.stringify(BrandMainImg))
                    formData.append("OrderNum", $("#OrderNum").val())
                    formData.append("IsShow", $("input[name='IsShow']:checked").val())
                    $.ajax({
                        url: "/ProductBrand/Update",
                        type: "POST",
                        dateType: "json",
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function (result) {
                            if (result.state) {
                                toastr.success('修改成功')
                                window.location.href = "/ProductBrand/List";
                            } else {
                                toastr.error(result.msg)

                            }
                        },
                        error: function (result) {
                            toastr.error('修改失败')

                        }

                    })
                }


            })
            init()
        })

    </script>
}
